<template>
  <view class="ts-detail">
    <view class="main-pd">
      <view class="u-flex u-flex-end">
        <view class="color-f34b47 font-28 u-m-b-20" v-if="tsMsg.state == 2"
          @click="$u.route('/pages/wyts/mydpj', { id: tsMsg.tsId })">满意度评价</view
        >
      </view>
      <view class="qus-block">
        <view class="color-595959 font-28 u-m-b-16">投诉事项</view>
        <view class="color-333 font-32">{{ tsMsg.title }}</view>
      </view>
      <view class="qus-block long-block u-m-t-20">
        <view class="color-595959 font-28 u-m-b-16">投诉具体描述</view>
        <view class="color-333 font-32">{{ tsMsg.content }}</view>
      </view>
      <!-- 底部信息 -->
      <view class="cell-msg">
        <view class="cell-item">
          <view>投诉人</view>
          <view>{{ tsMsg.dzkName || "" }}</view>
        </view>
        <view class="cell-item">
          <view>所在单元</view>
       <view>{{ tsMsg.louNumber }}号楼{{ tsMsg.dyNumber }}单元{{ tsMsg.fjNumber }}号</view>
        </view>
        <view class="cell-item">
          <view>所属小区</view>
          <view>{{ tsMsg.deptName || "" }}</view>
        </view>
        <view class="cell-item">
          <view>投诉时间</view>
          <view>{{ tsMsg.createTime || "" }}</view>
        </view>
        <view class="cell-item">
          <view>处理状态</view>
          <view>{{ clStatus(tsMsg.state) }}</view>
        </view>
        <view v-if="tsMsg.state == 2">
          <view class="cell-item row-item">
            <view>处理结果</view>
            <view class="u-m-t-16"
              >{{tsMsg.cljg || ''}}</view
            >
          </view>
          <view class="cell-item">
            <view>处理时间</view>
            <view>{{ tsMsg.clsj || '' }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { getTsInfoApi } from "@/api/index";
import { onLoad } from "@dcloudio/uni-app";
let tsMsg = ref({});
const clStatus = computed((status) => {
  return function (status) {
    let statusArr = ["待处理", "处理中", "已处理"];
    return statusArr[status];
  };
});
const getTsInfoHandle = (id) => {
  getTsInfoApi({
    id,
  }).then((res) => {
    if (res.success) {
      tsMsg.value = res.data;
    }
  });
};
onLoad((param) => {
  getTsInfoHandle(param.id);
});
</script>

<style lang="scss" scoped>
.ts-detail {
  padding-top: 20rpx;
  padding-bottom: 80rpx;

  .qus-block {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 32rpx;
    box-sizing: border-box;
    min-height: 246rpx;
  }

  .long-block {
    min-height: 366rpx;
  }

  .pic-item {
    margin-right: 16rpx;
    margin-bottom: 16rpx;

    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  .cell-msg {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .cell-item {
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      font-size: 32rpx;
      color: #595959;

      &:last-child {
        border: none;
      }
    }

    .row-item {
      flex-direction: column;
      justify-content: start;
    }
  }
}
</style>
